<!--  手机详情页主要内容-->
<template>
  <div class="shoujishow">
      <div class="box">
           <h1>明星产品</h1>
           <div class="box-nr">
          <div class="box-left">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/10018a0a678646e84525f3828536f3f9.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米11 Ultra</p>
                  <p class="p2">1.12''GN2｜2K四微曲屏 </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥5999起</p>
                  <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9481835131c0db907b3688667937ec7e.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米11 Pro</p>
                  <p class="p2">1.12''GN2｜骁龙888 </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥4999起</p>
                   <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
      </div>
      <div class="box">
           <h1>明星产品</h1>
           <div class="box-nr">
          <div class="box-left">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/710e5107cc2d5e8d0cefa74ee60982ee.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米11 青春版 </p>
                  <p class="p2">小米11 青春版 轻薄 </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥5999起</p>
                   <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/af9a1c024643ce1253e365c18a96dea3.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">小米11</p>
                  <p class="p2">骁龙888 | 2K四曲面屏  </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥4999起</p>
                  <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
      </div>
      <div class="box">
           <h1>明星产品</h1>
           <div class="box-nr">
          <div class="box-left">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2b33944db1a5082d123fca20bc126665.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">Note 9 Pro 5G</p>
                  <p class="p2">一亿像素夜景相机，120Hz六档变速高刷屏  </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥1599起</p>
                   <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2567185b51eff12f93574972f9018637.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">Note 9 5G</p>
                  <p class="p2">天玑 800U处理器，5000mAh电池，  </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥1299起</p>
                  <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
      </div>
      <div class="box">
           <h1>明星产品</h1>
           <div class="box-nr">
          <div class="box-left">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e8d5033843d37e48acd666689f948a0.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">Note 9 4G</p>
                  <p class="p2">6000mAh长续航  </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥999起</p>
                  <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      <div class="right">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dfbe21ef88b8ff2e0b43cb2fb2cbb77.jpg" alt="">
          <div class="word">
              <div class="word-left">
                  <p class="p1">Redmi 9A</p>
                  <p class="p2">5000mAh长循环大电量，6.53"超大护眼屏幕   </p>
              </div>
              <div class="word-right">
                  <p class="p3">￥1299起</p>
                  <router-link to="/phoneshop"><button>立即购买</button></router-link>
              </div>
          </div>
      </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
    name:"shoujishow",
  data () {
    return {
    };
  },

  components: {},

}

</script>
<style lang='less' scoped>
.box{
  width: 1250px;
  margin-right: auto;
  margin-left: auto;
}
.box-nr{
    display: flex;
    justify-content: space-between;
}
.box h1{
    font-size: 20px;
    margin: 10px 0;
}
.box img{
    border: 0;
    width: 500px;
    height: 300px;
}
.word{
    width: 500px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.word .p1{
    margin-left: 10px;
    font-size: 22px;
}
.word .p2{
    color: #666666;
    margin-top: 10px;
    margin-left: 10px;
}
.word .p3{
    font-size: 22px;
    color: #EA625B;
    text-align: center;
}
.word button{
    background-color: #fd5452;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 12px;
    border: none;
    color: aliceblue;
    margin-right: 10px;
    &:hover {
    background-color: orangered;
  }
}
img{
    cursor: pointer;
  transition: all 0.6s;
  &:hover{
    transform: scale(1.08);
    box-shadow: 0px 0px 18px rgba(0,0,0,0.5);
  }
}
</style>